<template>
	<u-navbar :title="title" :title-color="titleColor" :back-icon-color="backIconColor" :title-bold="true"
		:back-text="backText" :back-text-style="backStyle" :background="background" :border-bottom="false"
		:custom-back="goBack">
		<view class="slot-wrap" slot="right">
			<view v-if="$slots.rightButton" class="slot-view">
				<slot name="rightButton" />
			</view>
			<view class="content-view" v-if="text || image" hover-class="u-hover-class"
				@click="$u.throttle(handleClickRight, 500)">
				<view v-if="image" class="image-view" :style="'width:' + imageWidth + 'rpx'">
					<image mode="widthFix" :src="image"></image>
				</view>
				<view>{{ text }}</view>
			</view>
			<view class="content-view" v-if="secondText || secondImage" hover-class="u-hover-class"
				@click="$u.throttle(handleClickRightSecond, 500)">
				<view v-if="image" class="image-view" :style="'width:' + imageWidth + 'rpx'">
					<image mode="widthFix" :src="secondImage"></image>
				</view>
				<view>{{ secondText }}</view>
			</view>
		</view>

	</u-navbar>
</template>

<script>
	import UNavbar from "../u-navbar/u-navbar.vue"
	
	export default {
		components:{
			UNavbar
		},
		props: {
			title: {
				type: String,
				default: '',
			},
			backText: {
				type: String,
				default: '',
			},
			text: {
				type: String,
				default: '',
			},
			image: {
				type: String,
				default: '',
			},
			secondText: {
				type: String,
				default: '',
			},
			secondImage: {
				type: String,
				default: '',
			},
			imageWidth: {
				type: [String, Number],
				default: '24',
			},
			background: {
				type: Object,
				default () {
					return {
						'background-color': 'transparent'
					}
				},
			},
			backTextBold: {
				type: Boolean,
				default: false,
			},
			backIconColor: {
				type: String,
				default: '#333333',
			},
			titleColor: {
				type: String,
				default: '#191C27',
			},
			backTextStyle: {
				type: Object,
				default () {
					return {
						color: '#191C27',
						'font-size': 'weight',
						'font-size': '32rpx',
						'margin-left': '8rpx',
					}
				},
			},
			// 自定义返回逻辑
			customBack: {
				type: Function,
				// #ifdef APP-PLUS
				default: () => {
					if (getCurrentPages().length == 1) {
						uni.switchTab({
							url: '/pages/index/index'
						});
					} else {
						uni.navigateBack();
					}
				},
				// #endif
				// #ifdef MP
				default () {
					return () => {
						if (getCurrentPages().length == 1) {
							uni.switchTab({
								url: '/pages/index/index'
							});
						} else {
							uni.navigateBack();
						}
					}
				}
				// #endif

			},
		},
		data() {
			return {}
		},
		computed: {
			backStyle() {
				if (this.backTextBold) {
					return {
						...this.backTextStyle,
						'font-weight': 'bold'
					}
				} else {
					return this.backTextStyle
				}
			}
		},

		methods: {
			handleClickRight() {
				this.$emit('click', 0)
			},
			handleClickRightSecond() {
				this.$emit('click', 1)
			},
			goBack() {
				this.$store.commit('updateAuthorizationPage', false)
				if (getCurrentPages().length == 1) {
					uni.switchTab({
						url: '/pages/home/index'
					});
				} else {
					uni.navigateBack();
				}
			}
		},
	}
</script>
<style scoped lang="scss">
	.slot-wrap {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		// #ifdef APP-PLUS
		margin-right: 24rpx;
		// #endif
		// #ifdef MP
		margin-right: 8rpx;

		// #endif
		.slot-view {
			text-align: center;
			line-height: 48rpx;
		}

		.content-view {
			margin-left: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// width: 160rpx;
			padding: 0 18rpx;
			height: 48rpx;
			border-radius: 24rpx;
			background-color: #ffffff;
			color: #333333;
			font-size: 24rpx;

			.image-view {
				width: 20rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
		}

	}
</style>